<template>
    <div id="first">
      <p>我是大哥组件</p>
      <p>count的值为：{{$store.state.count}}</p>
      <p>
        <button @click="$store.commit('mod', 10)">修改count</button>
        <button @click="$store.commit('mod', 20)">修改count</button>
        <button @click="$store.commit('mod', 30)">修改count</button>
      </p>
      <p>
        <button @click="$store.dispatch('xiu', 10)">修改count异步</button>
        <button @click="$store.dispatch('xiu', 20)">修改count异步</button>
        <button @click="$store.dispatch('xiu', 30)">修改count异步</button>
      </p>
    </div>
</template>

<script>
export default {
  name: 'first',
  created () {
    console.log(this)
    // 可以通过如下方式获得vuex共享数据
    // console.log(this.$store.state.count)
    // console.log(this.$store.state.count1)

    // 业务组件需要调动mutations方法，形式为如下
    // this.$store.commit(方法名称，参数)
    // this.$store.commit('mod', 10)

    // 业务组件需要调用actions方法，形式如下
    // this.$store.dispatch(方法名称，参数)
  }
}
</script>

<style lang="less" scoped>
#first{
  width: 350px;
  height: 200px;
  border:2px solid blue;
}
</style>
